<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<!-- <myTabs :backgroundColor="#fff"></myTabs> -->
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#F0F0F0'"></myTabs>

		<view class="pages_area">
			<view class="pages_areaBox">
				<view class="pages_areaHeard">个人信息</view>
				<view class="pages_areaMain">
					<view class="pages_areaItems">
						<view class="pages_areaItemsName">姓名</view>
						<input class="pages_areaItemsInp" v-model="from.nickname" placeholder="请输入姓名" />
					</view>
					<view class="pages_areaItems">
						<view class="pages_areaItemsName">手机号码</view>
						<input class="pages_areaItemsInp" :disabled="true" v-if="from.phone" :value="from.phone"
							placeholder="请输入姓名" />
						<button class="pages_areaItemsInp phoneNumber" v-if="!from.phone" type="default"
							open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">点击授权获取手机号</button>
					</view>
					<view class="pages_areaItems" @click="isCategoryShow=true">
						<view class="pages_areaItemsName">身份选择</view>
						<input class="pages_areaItemsInp" :disabled="true" :value="from.identity" placeholder="请选择身份" />
						<image class="pages_areaItemsIcon" src="/static/img/leftActionIcon.png"></image>
					</view>
					<view class="pages_areaItems" @click="showPicker=true">
						<view class="pages_areaItemsName">所在城市</view>
						<input class="pages_areaItemsInp" :disabled="true" :value="from.city" placeholder="请选择常驻城市" />
						<image class="pages_areaItemsIcon" src="/static/img/leftActionIcon.png"></image>
					</view>
				</view>
			</view>
			<view class="pages_areaBox">
				<view class="pages_areaHeard">品牌信息</view>
				<view class="pages_areaMain">
					<view class="pages_areaItems">
						<view class="pages_areaItemsName">品牌名称</view>
						<input class="pages_areaItemsInp" v-model="from.brand" placeholder="请输入品牌名称" />
					</view>
					<view class="pages_areaItems">
						<view class="pages_areaItemsName">门店数量</view>
						<input class="pages_areaItemsInp" v-model="from.sales" type="number" placeholder="门店数量" />
					</view>
					<view class="pages_areaItems">
						<view class="pages_areaItemsName">年营业额</view>
						<input class="pages_areaItemsInp" v-model="from.turnover" type="number" placeholder="年营业额/万元" />
						<view class="pages_areaItemsUnit">万元</view>
					</view>
				</view>
			</view>
			<view @click="ensure" class="fromButtom">
				确认保存
			</view>

			<!-- 身份 -->
			<u-overlay :show="isCategoryShow" @click="isCategoryShow = false">
				<view class="saleBox" @click.stop="">
					<view class="saleBox__Heard">选择身份</view>
					<image @click.stop="isCategoryShow = false" class="saleBox__HeardImg"
						src="/static/img/chachaIcon.png">
						<picker-view :value="identityIndex" @change="categorybindChange" @click.stop=""
							style="width:100%;height:500rpx;" indicator-style="height:50px;">
							<picker-view-column>
								<block v-for="(item,index) in identityData" :key="index">
									<view style="line-height:50px;text-align:center;">{{item.identityName}}</view>
								</block>
							</picker-view-column>
						</picker-view>
						<view @click.stop="isCategoryShow = false" :class="'saleBox__MainItem saleBox__MainItem--red'">
							确定</view>
				</view>
			</u-overlay>
			<!-- 城市 -->
			<u-overlay :show="showPicker" @click="showPicker = false">
				<view class="saleBox" @click.stop="">
					<view class="saleBox__Heard">选择地址</view>
					<image @click.stop="showPicker = false" class="saleBox__HeardImg" src="/static/img/chachaIcon.png">
						<picker-view :value="regionIndex" style="width:100%;height:500rpx;"
							indicator-style="height:50px;" @change="bindRegionChange">
							<picker-view-column>
								<block v-for="(item,index) in regionData" :key="index">
									<view style="line-height:50px;text-align:center;">{{item.label}}</view>
								</block>
							</picker-view-column>
							<picker-view-column>
								<block v-for="(item,index) in regionData[regionIndex[0]].children" :key="index">
									<view style="line-height:50px;text-align:center;">{{item.label}}</view>
								</block>
							</picker-view-column>
						</picker-view>
						<view @click.stop="showPicker = false" :class="'saleBox__MainItem saleBox__MainItem--red'">
							确定</view>
				</view>
			</u-overlay>
		</view>
	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				title: '完善信息',
				from: {
					nickname: '',
					phone: '',
					identity: '',
					city: '',
					brand: '',
					sales: '',
					turnover: '',
				},
				identityIndex: [0],
				isCategoryShow: false,
				showPicker: false,
				regionIndex: [0, 0],
			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			

			if (this.user) {
				this.from.nickname = this.user.nickname;
				this.from.phone = this.user.phone;
				let item = this.identityData.find(newitem => {
					return newitem.identityId == this.user.identityId
				});
				console.log('item--->', item)
				let itemIndex = this.identityData.findIndex(newitem => {
					return newitem.identityId == this.user.identityId
				});
				this.identityIndex = [itemIndex ? itemIndex : 0];
				this.from.identity = item ? item.identityName : '';
				this.from.city = this.user.city;
				this.from.brand = this.user.brand;
				this.from.sales = this.user.sales ? this.user.sales : '';
				this.from.turnover = this.user.turnover ? this.user.turnover : '';

				for (let i = 0; i < this.regionData.length; i++) {
					let item = this.regionData[i].children;
					for (let j = 0; j < item.length; j++) {
						if (this.user.city == item[j].label) {
							this.regionIndex = [i, j];
							return;
						}
					}
				}

			}
			let phone = uni.getStorageSync('phone');
			if(phone){
				this.from.phone = phone;
			}

		},
		onShow() {
			console.log('regionData--->', this.regionData)
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			},
			identityData() {
				return this.$store.state.identityData;
			},
			regionData() {
				return this.$store.state.regionData;
			},
		},
		methods: {
			getInfoUser() {
				return new Promise((ress,rejj)=>{
					
						let that = this;
							uni.showModal({
								title: '温馨提示',
								content: '亲，授权微信登录后才能正常使用小程序功能',
								success(res) {
									//如果用户点击了确定按钮
									if (res.confirm) {
										uni.getUserProfile({
											desc: '获取你的昵称、头像',
											success: res => {
												let {
													userInfo
												} = res
												let req = {
													cityId: that.location ? that.location.id : '',
													avatar: userInfo.avatarUrl,
													nickname: userInfo.nickName,
												}
												ress(userInfo.avatarUrl);
												
											},
											fail: res => {
												//拒绝授权
												uni.showToast({
													title: '您拒绝了请求,不能正常使用小程序',
													icon: 'error',
													duration: 2000
												});
											}
										});
									} else if (res.cancel) {
										//如果用户点击了取消按钮
										//console.log(3);
										uni.showToast({
											title: '您拒绝了请求,不能正常使用小程序',
											icon: 'error',
											duration: 2000
										});
									}
								}
							});
						
		
					
				})
				},
			
			ensure() {
				
				for (let key in this.from) {
					let item = this.from[key];
					if (!item && (key != 'brand' && key != 'sales' && key != 'turnover') ) {

						let text = "";
						if (key == "nickname") {
							text = '请输入姓名';
						} else if (key == "phone") {
							text = '请获取手机号';
						} else if (key == "identity") {
							text = '请选择身份';
						} else if (key == "city") {
							text = '请选择城市';
						}
						uni.showToast({
							icon: 'none',
							title: text
						})
						return
					}
				}

				this.from.identityId = this.identityData[this.identityIndex].identityId;
				this.from.cityId = this.regionData[this.regionIndex[0]].children[this.regionIndex[1]].id;
				console.log('user--->',this.from);
				if(this.user&&this.user.avatar){
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.$api.accountWxEditInfo(this.from).then(res => {
						if (res.code == 200) {
							this.$store.commit('updataUser', res.data.user);
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								mask: true
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000)
						}
					})
				}else{
				
					this.getInfoUser().then(ress=>{
						uni.showLoading({
							title: '加载中',
							mask: true
						})
						this.from.avatar = ress;
						console.log('user--->',this.from);
						this.$api.accountWxEditInfo(this.from).then(res => {
							if (res.code == 200) {
								this.$store.commit('updataUser', res.data.user);
								uni.showToast({
									title: '保存成功',
									icon: 'none',
									mask: true
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							}
						})
					})
					
				}
		

				

			},
			// 选择地区
			bindRegionChange(e) {
				let {
					value
				} = e.detail;

				if (value[0] !== this.regionIndex[0]) {
					value[1] = 0;
				}
				this.regionIndex = value
				this.from.city = this.regionData[this.regionIndex[0]].children[this.regionIndex[1]].label;
			},
			categorybindChange(e) {
				this.identityIndex = e.detail.value;
				this.from.identity = this.identityData[this.identityIndex].identityName;
			},
			decryptPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$api.userWxGetPhone({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res => {
						if (res.code == 200) {
							this.from.phone = res.data
								let user = uni.getStorageSync('user');
								user = user ? user : {};
								user.phone = this.from.phone;
								uni.setStorageSync('phone',this.from.phone);
								this.$store.commit('updataUser', user);
						
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取失败'
					})
				}


			},

			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		min-height: 100vh;
		box-sizing: border-box;

		.pages_area {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.pages_areaMain {
			padding: 0 24rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin: 16rpx 0 32rpx 0;
		}

		.pages_areaItems {
			width: 100%;
			height: 104rpx;
			display: flex;
			align-items: center;
		}

		.pages_areaItems:not(:last-child) {
			border-bottom: 1rpx solid #f2f2f2;
		}

		.pages_areaItemsIcon {
			flex: 0 0 24rpx;
			width: 24rpx;
			height: 24rpx;
		}

		.pages_areaItemsName {
			flex: 0 0 112rpx;
			width: 112rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			margin-right: 72rpx;
		}

		.pages_areaItemsInp {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
		}

		.phoneNumber {
			    flex: 1;
			    height: 100%;
			    line-height: 102rpx;
			    background: rgba(255, 255, 255, 0.39);
			    opacity: 1;
			    border-radius: 8rpx;
			    margin: 0;
			    font-size: 28rpx;
			    font-family: PingFang SC;
			    font-weight: 400;
			    color: #999999;
			    text-align: left;
			    padding: 0;
			
			&::after{
				border: none !important;
			}
		}

		.pages_areaItemsUnit {
			flex: 0 0 56rpx;
			width: 56rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 40rpx;
			color: #000000;

		}

		.pages_areaHeard {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #000000;
			padding-left: 20rpx;
			position: relative;


			&::after {
				content: '';
				width: 8rpx;
				height: 28rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #ffda2d;
			}
		}

		.fromButtom {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #FFDA2D;
			border-radius: 24rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #000;
			margin: 56rpx auto;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #333;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #333;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #ffda2d;
			color: #333;
			box-shadow: 0 28rpx 22rpx -26rpx #ffda2d;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

			span {
				font-size: 23rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}

		}
	}
</style>
